<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>第二次学习</title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
				font-family: "宋体","微软雅黑";
			}
			
			.layout {
				width: 1200px;
				margin: 0 auto;
			}
			
			ul li {
				list-style: none;
			}
			
			.sj {
				width: 0;
				height: 0;
				/* 为了照顾兼容性 */
				line-height: 0;
				font-size: 0;
				border-top: 10px solid #008000;
				border-bottom: 10px solid #aaffff;
				border-left: 10px solid #aaaaff;
				border-right: 10px solid #ffff7f;
				margin: 20px;
			}
			
			.jd {
				position: relative;
				width: 120px;
				height: 250px;
				background-color: pink;
				margin: 20px;
			}
			
			.jd span {
				position: absolute;
				right: 10px;
				top: -10px;
				width: 0;
				height: 0;
				line-height: 0;
				font-size: 0;
				border: 5px solid transparent;
				border-bottom-color: pink;
			}
			
			.tb {
				position: relative;
				width: 120px;
				height: 250px;
				background-color: #AAAAFF;
				margin: 20px;
			}
			
			.tb span {
				position: absolute;
				top: 20px;
				right: -10px;
				width: 0;
				height: 0;
				line-height: 0;
				font-size: 0;
				border: 5px solid #55ffff;
				border-left-color: #ffaaff;
			}
			
			.content {
				width: 1200px;
				margin: 20px auto;
				height: 300px;
			}
			
			
			
			.content ul li {
				position: relative;
				float: left;
				width: 234px;
				height: 300px;
				border: 2px solid #11a4ff;
				border-radius: 5px;
				margin-left: -2px;
			}
			
			.content ul li:hover {
				z-index: 1;
				border: 2px solid #AAAAFF;
			}
			
			.sidebar ul li {
				width: 318px;
				height: 96px;
				margin: 20px;
				/* background-color: #000000; */
			}
			
			.sidebar ul li img {
				float: left;
				width: 153px;
				height: 96px;
				border-radius: 5px;
				margin-right: 10px;
			}
			
			.sidebar ul li p:hover {
				color: #CA6351;
			}
			
			
			
		</style>
	</head>
	<body>
		<!-- 1.三角应用 -->
		<span class="sj"></span>
		<!-- 京东三角应用 -->
		<div class="jd">
			<span></span>
		</div>
		<!-- 淘宝三角应用 -->
		<div class="tb">
			<span></span>
		</div>
		
		<!-- 2.margin负值运用 -->
		<div class="content">
			<ul>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>
		
		<!-- 文字围绕浮动元素 -->
		<div class="sidebar layout">
			<ul>
				<li>
					<img src="img/48f75d9c3e2b404097de20bae3023517~tplv-tt-cs0_583_410.jpg" >
					<p>年轻人想躺平、害怕卷，有啥建议？董明珠这样回答</p>
				</li>
				<li>
					<img src="img/48f75d9c3e2b404097de20bae3023517~tplv-tt-cs0_583_410.jpg" >
					<p>年轻人想躺平、害怕卷，有啥建议？董明珠这样回答</p>
				</li>
				<li>
					<img src="img/48f75d9c3e2b404097de20bae3023517~tplv-tt-cs0_583_410.jpg" >
					<p>年轻人想躺平、害怕卷，有啥建议？董明珠这样回答</p>
				</li>
				<li>
					<img src="img/48f75d9c3e2b404097de20bae3023517~tplv-tt-cs0_583_410.jpg" >
					<p>年轻人想躺平、害怕卷，有啥建议？董明珠这样回答</p>
				</li>
				<li>
					<img src="img/48f75d9c3e2b404097de20bae3023517~tplv-tt-cs0_583_410.jpg" >
					<p>年轻人想躺平、害怕卷，有啥建议？董明珠这样回答</p>
				</li>
			</ul>
		</div>
		
		
	</body>
</html>
